import { View } from "@tarojs/components"
import { Stepper } from "@antmjs/vantui"
import WowField from "../WowField"

import "./index.less"

const WowNeedVocation = props => {

  const numChange = e => {
    props.onChange && props.onChange(props.icon, e.detail)
  }

  return (
    <View className="wow-need-vocation-wrapper">
      <WowField
        disabled
        renderIcon={
          <Stepper
            disableInput
            integer
            value={props.value}
            disablePlus={props.disablePlus}
            disableMinus={props.disableMinus}
            onChange={numChange}
            min="0"
            max="4" />
        }
        leftIcon={props.icon}
        placeholder={props.name} />
      {props.icon !== 'dps' ? (<View className="wow-tag">+50%</View>) : ''}
    </View>
  )
}

export default WowNeedVocation